<template>
	<view class="body">
		<myHead :title="title" />
		<uni-icons type="paperplane-filled" size="30" class="icon" :style="'top:0px'"  @click="showDrawer()"></uni-icons>

		<uni-drawer ref="showRight" mode="left" >
			<scroll-view style="height: 100%;">
				<uni-list :clickable="true">
					<uni-list-item :class="{'active-list':current}" title="" note="" @click="current=true">
					 <template slot="header">
					          <button type="default" @click="current=true">三维全景导栏</button>
					        </template>
					</uni-list-item>
					<uni-list-item  :class="{'active-list':!current}" title=""  >
						<template slot="header">
						    <button type="default" @click="current=false">AR全景</button>
						  </template>
					</uni-list-item>
				</uni-list>
			</scroll-view>
		</uni-drawer>

		<view v-show="current">
			<web-view  v-if="current":webview-styles="webviewStyles"  class="web-view"
			:style="'z-index:'+z_index+';height:'+height+'px !important;top:'+top+'px !important'" 
			@onPostMessage="showDrawer"
			src="https://720yun.com/t/70vkuh2lr7y?scene_id=45456291"></web-view>
		</view>
		<view v-show="!current">
			<web-view  v-if="!current" :webview-styles="webviewStyles"  class="web-view"
			:style="'height:'+height+'px !important;top:'+top+'px !important'" 
			src="http://cons.yijianar.com/login"></web-view>
		</view>
		
		<view>
			<myFooter :isSelected.sync="selected" />
		</view>
	</view>
</template>

<script>
	import myHeader from '../components/index_header.vue'
	import myFooter from '../components/index_footer.vue'
	export default {
		data() {
			return {
				title: "BIM展厅",
				value: "",
				selected: 'ibm',
				current: true,
				height:0,
				top:0,
				windowHeight:0,
				z_index:-9,
				webviewStyles: {
					wdith:'80%',
					height:'80%',
					progress: {
						color: '#FF3333'
					}
				}}
			}, components: {
					myHead: myHeader,
					myFooter: myFooter,
				},
				async  mounted(){
					let headheight = 0;
					let footerheight = 0;
					
					let query = uni.createSelectorQuery();
					query.select('.head').boundingClientRect(data => {
					   headheight = data.bottom
					}).exec()
					query.select('iframe').boundingClientRect(data => {
					   console.log(".web-view",data)
					}).exec()
					this.top=  headheight
					query.select('.footer').boundingClientRect(data => {
					   footerheight =  data.top
					   console.log("footerheight:",data.top,data.bottom)
					}).exec()
					this.height= footerheight - this.top
					this.z_index = -9;
					this.windowHeight = uni.getSystemInfoSync().screenHeight
				},
				methods: {
					showDrawer() {
						console.log(11111)
						this.$refs.showRight.open();
					},
					closeDrawer() {
						this.$refs.showRight.close();
					},
				},
		
		}
</script>
<style lang="scss" scoped>
	.body {
		/deep/ .icon {
			color: blue !important;
			position: absolute;
			left: 0;
			// top: 50%;
			z-index: 999;
			
		}
		/deep/ .uni-drawer{
			z-index: 999;
		}
		
			/deep/ .uni-list-item{
				>.uni-list-item__container{
					padding: 0!important;
					width: 100%;
					uni-button{
						padding: 0;
						width: 100%;
						background-color: #f8f8f8;
						border: transparent;
						&::after{
							content: '';
						}
					}
			}
		}
	}
	/deep/ body{
		 .web-view{
			z-index: -999;
		}
		
		 .active-list{
			background-color: #e20909;
			/deep/ uni-button{
			background-color: #e20909 !important;
			color: #FFF !important;
				}
		}
		
	}
</style>
